<template>
  <div class="condition" @contextmenu.prevent.stop="onRightMenu">
    <TwoPart class="item-border">
      <template v-slot:part1>
        <div class="target">
          <i class="iconfont" style="margin-right: 4px;" :class="getObjectIcon()"></i>
          {{ getObjectName() }}
        </div>
      </template>
      <template v-slot:part2>
        <div class="condition-value">
          {{ getCondition() }}
        </div>
      </template>
    </TwoPart>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, PropType, toRaw } from 'vue';
import TwoPart from './tow-part.vue';
import { Emitter } from '@/ui-kit/index';
import { Msg } from '@/ui-kit/menu';
import { ProvideKey } from '../msg';
import { EventCondition } from '../../store/events';
import pluginsStore from '../../store/plugins';
import { getTargetIcon, getTargetName } from './tools';

export default defineComponent({
  name: 'condition',
  components: { TwoPart },
  emits: [],
  props: {
    block: {
      type: String,
      required: true,
      default: '',
    },
    data: {
      type: Object as PropType<EventCondition>,
      required: true,
      default: () => {
        return {};
      },
    },
  },
  setup(props, { emit }) {
    const removeBlockCondition = inject(ProvideKey.RemoveBlockCondition, (block: string, condition: EventCondition) => {});
    return {
      getObjectName(): string {
        const { target } = (props.data as EventCondition);
        return getTargetName(target);
      },
      getObjectIcon() {
        return getTargetIcon((props.data as EventCondition).target);
      },
      getCondition() {
        const { target, condition } = (props.data as EventCondition);
        if (condition) {
          const [bundleID, conditionID] = condition.split(':'); // bundleID:conditionID
          const obj: sail.GameObject | null = pluginsStore().getObjectByID(bundleID);
          if (obj) {
            const ret = obj.ace?.conditions?.find(el => el.id === conditionID);
            if (ret) {
              return ret.name;
            }
          } else {
            console.warn(`数据异常:目标${target}没有condition:${condition}`);
          }
        }
        return '';
      },
      onRightMenu(event: MouseEvent) {
        Emitter.emit(Msg.ShowMenu, event, [
          {
            name: '删除',
            callback: () => {
              removeBlockCondition(props.block, toRaw(props.data));
            },
          },
        ]);
      },
    };
  },
});
</script>
<style scoped lang="scss">
.condition {
  .item-border {
    border: none;
    border-bottom: 1px solid #bfcce0;

    .target {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
  }

  .condition-value {
    box-sizing: border-box;
    padding: 0 5px;
    background-color: #f5f8ff;
    text-align: left;
    width: 100%;
  }
}
</style>
